<template>
  <div>
    <el-row>
      <el-col style="margin-top: 10px">
        <el-table
          class="box-table"
          :data="Data"
          :stripe="true"
          :border="true"
          :fit="true"
        >
          <el-table-column
            prop="name"
            label="病患姓名"
            width="auto"
            align="center"
            header-align="center"
          >
          </el-table-column>
          <el-table-column
            prop="heartRate.heartRate"
            label="心率"
            width="auto"
            align="center"
            header-align="center"
          >
          </el-table-column>
          <el-table-column
            prop="heartRate.createTime"
            label="最新上传时间"
            width="auto"
            align="center"
            header-align="center"
          >
          </el-table-column>

          <el-table-column
            fixed="right"
            label="操作"
            align="center"
            width="auto"
          >
            <template #default="scope">
              <el-button
                link
                type="primary"
                size="small"
                @click="
                  info(scope.row);
                  dialogVisible = true;
                "
                >往期记录</el-button
              >
              <el-button
                link
                type="primary"
                size="small"
                @click="
                  shezhi(scope.row);
                  dialogVisible_xinlu = true;
                "
                >设置心率异常判定</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col style="margin: 0 auto">
        <el-card>
          <div class="block">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="pageSize"
              :total="Total"
            >
            </el-pagination>
          </div>
        </el-card>
      </el-col>

      <!-- 往期心率 -->
      <el-dialog
        v-model="dialogVisible"
        title="往期记录"
        width="50%"
        :before-close="handleClose"
      >
        <div style="margin-bottom: 30px">
          选择日期:
          <el-date-picker
            style="margin-left: 30px"
            v-model="Time"
            placeholder="请选择日期"
            range-separator="To"
            :size="size"
            @change="change"
            format="YYYY/MM/DD"
            value-format="YYYY-MM-DD"
          />
        </div>
        <el-table
          class="box-table"
          :data="msg_info"
          :stripe="true"
          :border="true"
          :fit="true"
        >
          <el-table-column
            prop="createTime"
            label="时间"
            width="auto"
            align="center"
            header-align="center"
          >
          </el-table-column>
          <el-table-column
            prop="heartRate1"
            label="心率"
            width="auto"
            align="center"
            header-align="center"
          >
          </el-table-column>
        </el-table>
        <el-card>
          <div class="block">
            <el-pagination
              @size-change="handleSizeChange_2"
              @current-change="handleCurrentChange_2"
              :current-page="currentPage_2"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="pageSize_2"
              :total="Total_2"
            >
            </el-pagination>
          </div>
        </el-card>
      </el-dialog>

      <!-- 设置心率异常 -->
      <el-dialog
        v-model="dialogVisible_xinlu"
        title="心率异常设置"
        width="50%"
        :before-close="handleClose2"
      >
        <el-col>
          心率下限:
          <el-input
            v-model="xinlu.xiaxian"
            placeholder="请输入心率下限"
            type="number"
            style="width: 200px"
          ></el-input>
          心率上限:
          <el-input
            v-model="xinlu.shangxian"
            placeholder="请输入心率上限"
            type="number"
            style="width: 200px"
          ></el-input>
        </el-col>

        <el-col style="margin-top: 20px">
          开始时间:
          <el-time-picker
            v-model="xinlu.starttime"
            :format="'HH:mm'"
            value-format="HH:mm"
            arrow-control
            placeholder="请选择开始时间"
            style="width: 200px"
          />
          结束时间:
          <el-time-picker
            v-model="xinlu.endtime"
            :format="'HH:mm'"
            value-format="HH:mm"
            arrow-control
            placeholder="请选择结束时间"
            style="width: 200px"
          />
        </el-col>

        <el-button
          type="primary"
          style="margin-left: 25%; width: 20%; margin-top: 20px"
          @click="shezhi_add()"
          >确认</el-button
        >
      </el-dialog>
    </el-row>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive, toRaw, onMounted, onBeforeMount } from "vue";
import apiService from "@/services/apiService";
import { conversionUtcDate, base64ToExcelAndDownload } from "@/utils/auth";
import { v4 as uuidv4 } from "uuid";
import { ElMessageBox } from "element-plus";
import {
  GetDevicesWithPaging,
  PaginFindHeartRateAndLocationByTimeRange,
  UpdateUserConfigurationInformation
} from "@/api/api";
import { getToken } from "@/utils/auth";
import dayjs from "dayjs";
import { message } from "@/utils/message";
defineOptions({
  // name 作为一种规范最好必须写上并且和路由的name保持一致
  name: "Xinlu"
});

//表格数据
const Data = ref<any>([
  // {
  //   userid: '患者1',
  //   userage:'100'
  // },{
  //   userid: '患者2',
  //   userage:'150'
  // }
]);
const currentPage = ref(1); // 当前页数
const pageSize = ref(10); // 每页条数
const Total = ref<number>(1); //总条数

//获取表单数据
const GetList = () => {
  Data.value = [];
  const data = ref({
    token: getToken().accessToken,
    body: {
      pageNumber: currentPage.value,
      pageSize: pageSize.value
    }
  });
  GetDevicesWithPaging(data.value)
    .then((res: any) => {
      console.log("表单数据", res);
      Data.value.push(...res.data.results);
      Total.value = res.data.totalCount;
    })
    .catch((err: any) => {
      console.log(err);
    });
};

//详情数据
const size = ref<"default" | "large" | "small">("default");
const Time = ref<any>();
const msg_info = ref<any>([]);
const currentPage_2 = ref(1); // 当前页数
const pageSize_2 = ref(10); // 每页条数
const Total_2 = ref<number>(1); //总条数
const userId = ref<any>([]);
const info = row => {
  userId.value = row.userId;
  console.log("当前id:", userId.value);
};
const change = () => {
  msg_info.value = [];
  // if (e && e.length === 2) {
  //   const startDate = dayjs(e[0]); // 使用 dayjs 处理日期
  //   const endDate = startDate.add(7, "day"); // 计算结束时间为开始时间的七天后
  //   Time.value = [startDate.format("YYYY-MM-DD"), endDate.format("YYYY-MM-DD")];
  // }
  console.log(Time.value);
  const data = ref({
    token: getToken().accessToken,
    body: {
      pageNumber: currentPage_2.value,
      pageSize: pageSize_2.value,
      Date: Time.value,
      // startTime: Time.value[0],
      // endTime: Time.value[1],
      userId: userId.value
    }
  });
  PaginFindHeartRateAndLocationByTimeRange(data.value)
    .then((res: any) => {
      console.log("心率详情数据", res);
      msg_info.value.push(...res.data.heartRates);
      Total_2.value = res.data.totalHeartRates;
    })
    .catch((err: any) => {
      console.log(err);
    });
};
// 监听页码变化
const handleCurrentChange = val => {
  currentPage.value = val;
  GetList();
};

// 监听每页条数变化
const handleSizeChange = val => {
  pageSize.value = val;
};
// 监听页码变化
const handleCurrentChange_2 = val => {
  currentPage_2.value = val;
  change();
};

// 监听每页条数变化
const handleSizeChange_2 = val => {
  pageSize_2.value = val;
};

const dialogVisible = ref(false);
const dialogVisible_xinlu = ref(false);
const xinlu = ref<any>({
  id: "",
  xiaxian: "",
  shangxian: "",
  starttime: "",
  endtime: "",
  userId: "",
  steps: "",
  lowerSteps: "",
  distance: "",
  stepsStartTime: "",
  stepsEndTime: ""
});
//设置心率异常判定
const shezhi = row => {
  console.log(row);

  (xinlu.value.distance = row.userConfigs[0].distance),
    (xinlu.value.steps = row.userConfigs[0].steps),
    (xinlu.value.lowerSteps = row.userConfigs[0].lowerSteps),
    (xinlu.value.stepsStartTime = row.userConfigs[0].stepsStartTime),
    (xinlu.value.stepsEndTime = row.userConfigs[0].stepsEndTime),
    (xinlu.value.userId = row.userId),
    (xinlu.value.id = row.userConfigs[0].id);
};
const shezhi_add = () => {
  console.log(xinlu.value);

  if (
    xinlu.value.starttime != "" &&
    xinlu.value.endtime != "" &&
    xinlu.value.shangxian != "" &&
    xinlu.value.xiaxian != ""
  ) {
    const data = ref({
      token: getToken().accessToken,
      body: {
        id: xinlu.value.id,
        heartRate: Number(xinlu.value.shangxian),
        steps: xinlu.value.steps,
        distance: xinlu.value.distance,
        lowerHeartRate: Number(xinlu.value.xiaxian),
        heartRateEndTime: xinlu.value.endtime,
        heartRateStartTime: xinlu.value.starttime,
        lowerSteps: xinlu.value.lowerSteps,
        userId: xinlu.value.userId,
        stepsStartTime: xinlu.value.stepsStartTime,
        stepsEndTime: xinlu.value.stepsEndTime
      }
    });
    UpdateUserConfigurationInformation(data.value)
      .then((res: any) => {
        console.log(res);
        if (res.code == 200) {
          message("配置成功", { type: "success" });
          GetList();
          dialogVisible_xinlu.value = false;
        }
      })
      .catch((err: any) => {
        console.log(err);
      });
  } else {
    message("请填写完整心率设置信息", { type: "error" });
  }
};
const handleClose = (done: () => void) => {
  Time.value = "";
  done();
};
const handleClose2 = (done: () => void) => {
  xinlu.value.xiaxian = "";
  xinlu.value.shangxian = "";
  xinlu.value.starttime = "";
  xinlu.value.endtime = "";
  done();
};
onBeforeMount(() => {
  // GetList();
});
onMounted(() => {
  GetList();
  console.log(300 + 1633 + 890);
});
</script>

<style lang="scss" scoped></style>
